<template>
	<view class="content" :style="'background:'+publicTextColor.app_bg_color+';'">
		<view class="topTitle" :style="'top:'+zhuangtai+'px'">
			<image class="back" @click="backClick" :src="publicimg.btn_back" mode=""></image>
			<view class="" style="font-size: 32rpx;">
				兑换记录
			</view>
		</view>
		<view class="listindex font34" :style="user_margin_top">
			<view class="item" @click="changeTopTitle(item.id)" v-for="(item, index) in toptitleList" :key="index">
				<view :style="toptitleid == item.id?font_1st:font_3rd">{{item.name}}</view>
				<!-- <view class="numbertitle font20" v-if="item.number !=0">
					<text :style="'color:'+publicTextColor.font_3rd_color+';'">{{orderList.length}}</text>
				</view> -->
			</view>
		</view>
		<view class="itemindex" :style="app_theme" v-if="orderList.length>0">
			<view class="item" v-for="(item, index) in orderList" :key="index" :style="app_border">
				<view class="infotop">
					<image class="exchangeimage" :src="item.gift_thumb" mode=""></image>
					<view class="textinfo">
						<text class="text1 font28" :style="font_1st">{{item.gift_name}}</text>
						<text class="font24" v-if="item.express_time!=''" :style="font_3rd">{{item.express_name}}:{{item.express_no}}</text>
						<text class="font24" v-else :style="font_3rd">{{item.gift_name}}</text>
					</view>
				</view>
				<view class="timebtn font24" :style="'background:'+publicTextColor.app_border_color+';'">
					<view :style="font_3rd">兑换时间：{{item.create_time}}</view>
					<view class="btn" v-if="item.status == 1">
						<image :src="publicimg.btn_xs_disabled" mode=""></image>
						<text class="index-1" :style="font_1st">待发放</text>
					</view>
					<view class="btn" v-if="item.status == 2" @click="getExchageListEnter(item.id)">
						<image :src="publicimg.btn_xs_warm" mode=""></image>
						<text class="index-1" :style="font_1st">确认收货</text>
					</view>
					<view class="btn" v-if="item.status == 3">
						<image :src="publicimg.btn_xs_primary" mode=""></image>
						<text class="index-1" :style="font_1st">已收货</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var cssjs = require('@/js/cssjs.js')
	var imagejs = require('@/js/imagejs.js')
	var util = require('@/js/util.js')
	export default {
		data() {
			return {
				publicTextColor:'',
				publicimg:'',
				zhuangtai:0,
				toptitleid:0,
				toptitleList:[
					{
						id:0,
						name:"全部",
					},
					{
						id:1,
						name:"待发放",
					},
					{
						id:2,
						name:"待收货",
					},
					{
						id:3,
						name:"已收货",
					},
				],
				page:1,
				size:10,
				orderList:[]
			};
		},
		onShow() {
			this.getExchageList()
			let that = this
			let aniosgaodu = 0
			uni.getSystemInfo({
				success: function(res) {
					console.log(res);
					that.zhuangtai = res.statusBarHeight;
					var a = res.model.split(' ');
					if (a[0] == 'iPhone') {
						aniosgaodu = 44;
					} else {
						aniosgaodu = 48;
					}
					that.zhuangtai = parseInt(that.zhuangtai)+4
					console.log(that.zhuangtai)
				}
			});
		},
		onLoad() {
			this.setcolorConfig()
		},
		computed:{
			user_margin_top(){
				return `margin-top:${(this.zhuangtai+52)}px;background:${this.publicTextColor.app_theme_color};`
			},
			page_top(){
				return `margin-top:${(this.zhuangtai+52)}px;`
			},
			app_border_top(){
				return `border-top:2rpx solid ${this.publicTextColor.app_border_color};`
			},
			app_border_bottom(){
				return `border-bottom:2rpx solid ${this.publicTextColor.app_border_color};`
			},
			app_border(){
				return `border:2rpx solid ${this.publicTextColor.app_border_color};`
			},
			app_theme(){
				return `background:${this.publicTextColor.app_theme_color};`
			},
			app_bg(){
				return `background:${this.publicTextColor.app_bg_color};`
			},
			font_4th(){
				return `color:${this.publicTextColor.font_4th_color};`
			},
			font_3rd(){
				return `color:${this.publicTextColor.font_3rd_color};`
			},
			font_2nd(){
				return `color:${this.publicTextColor.font_2nd_color};`
			},
			font_1st(){
				return `color:${this.publicTextColor.font_1st_color};`
			}
		},
		methods:{
			getExchageListEnter(id){
				let _self = this
				uni.request({
					url: util.getUrl("gift/order_confirm"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						order_id:id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							uni.showToast({
								title:'收货成功',
								icon:'success'
							})
							_self.page = 1 
							_self.getExchageList()
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					},
				});
			},
			getExchageList(){
				let _self = this
				uni.request({
					url: util.getUrl("gift/order"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						page:_self.page,
						size:_self.size,
						tab:_self.toptitleid
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							if(_self.page == 1){
								if(res.data.data.list.length <=0){
									uni.showToast({
										title:"暂无更多信息！",
										icon:'none'
									})
								}else{
									_self.orderList = res.data.data.list
								}
							}else if(res.data.data.list.length <=0){
								this.page --
								uni.showToast({
									title:"暂无更多信息！",
									icon:'none'
								})
							}else{
								for(let key in res.data.data.list){
									_self.orderList.push(res.data.data.list[key])
								}
							}
						}
					},
				});
			},
			setcolorConfig(){
				this.publicTextColor = uni.getStorageSync("diyColor")
				this.publicimg = uni.getStorageSync("diyImg")
			},
			changeTopTitle(id){
				this.toptitleid = id
				this.page = 1
				this.orderList = []
				this.getExchageList()
			},
			backClick(){
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.itemindex{
		width: 690rpx;
		border-radius: 20rpx;
		padding: 31rpx 30rpx 94rpx 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		.item{
			width: 630rpx;
			box-sizing: border-box;
			padding-top: 22rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			.timebtn{
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 20rpx 20rpx;
				border-radius:  0 0 20rpx 20rpx;
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 131rpx;
					height: 40rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: 0;
						top: 0;
						left: 0;
					}
				}
			}
			.infotop{
				display: flex;
				align-items: center;
				margin-bottom: 22rpx;
				.textinfo{
					display: flex;
					flex-direction: column;
					.text1{
						margin-bottom: 17rpx;
					}
				}
				.exchangeimage{
					width: 96rpx;
					height: 96rpx;
					margin-right: 22rpx;
					border-radius: 12rpx;
					margin-left: 23rpx;
				}
			}
		}
	}
	.listindex{
		box-sizing: border-box;
		height: 80rpx;
		width: 690rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 20rpx;
		.item{
			position: relative;
			.numbertitle{
				position: absolute;
				top: -5rpx;
				right: -28rpx;
				background-color: #EE0A24;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				text-align: center;
			}
		}
	}
	.content{
		min-height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
	}
	.topTitle{
		color: #FFFFFF;
		display: flex;
		align-items: center;
		height: 67rpx;
		justify-content: center;
		position: absolute;
		z-index: 10;
		width: 100%;
		.back{
			width: 20rpx;
			height: 31rpx;
			position: absolute;
			left: 31rpx;
		}
	}
</style>
